<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h3>{{ title }}</h3>
      <div>
        <button @click="count--">-</button>
        <span>{{ count }}</span>
        <button @click="count++">+</button>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      /**
       1. 什么时候可以请求网络数据?
       2. 什么时候可以操作dom?
       */
      const app = new Vue({
        el: "#app",
        data: {
          count: 100,
          title: "计数器",
        },
        // 1. 创建阶段
        beforeCreate() {
          console.log("实例创建之前-beforeCreate", this.count);
        },
        created() {
          // 请求网络数据
          console.log("实例创建之后-created", this.count);
        },
        // 2. 挂载阶段
        beforeMount() {
          console.log(
            "实例挂载之前-beforeMount",
            document.querySelector("span").innerHTML
          );
        },
        mounted() {
          // 最早可以去操作dom
          console.log(
            "实例挂载之后-mounted",
            document.querySelector("span").innerHTML
          );
        },
        // 3. 更新阶段
        beforeUpdate() {
          console.log(`实例更新之前-beforeUpdate`);
        },
        updated() {
          console.log(`实例更新之后-updated`);
        },
        // 4. 销毁阶段
        beforeDestory() {
          // 实例销毁之前去释放一些vue以外的资源, 比如: 定时器, 延时器
          console.log("实例销毁之前-beforeDestory");
        },
        destoryed() {
          console.log("实例销毁之后-beforeDestory");
        },
      });
    </script>
  </body>
</html>
